<!DOCTYPE HTML>
<html>
<head>
<title>Home</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all">
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Seen Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<link href='http://fonts.useso.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.useso.com/css?family=Fugaz+One' rel='stylesheet' type='text/css'>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/responsiveslides.min.js"></script>
<script>
    $(function () {
      $("#slider").responsiveSlides({
      	auto: true,
      	nav: true,
      	speed: 500,
        namespace: "callbacks",
        pager: true,
      });
    });
	
  </script>

<!---- start-smoth-scrolling---->
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
 <script type="text/javascript">
		jQuery(document).ready(function($) {
			$(".scroll").click(function(event){		
				event.preventDefault();
				$('html,body').animate({scrollTop:$(this.hash).offset().top},1200);
			});
		});
	</script>
<!---End-smoth-scrolling---->
<script src="js/bootstrap.js"></script>

</head>
<body>
<!-- header -->
<div class="header" id="home">
	
		<div class="header-top">
		<div class="container">
			<div class="icon">
				<ul>
				  <li><i class="message"></i></li>
					<li><a href="mailto:example@mail.com">Info@Seen.com</a></li>
						<li><i class="phone"></i></li>
							<li><p>+00(123)4567890</p></li>
				</ul>
		</div>
				<div class="social-icons">
				<a href="#"><i class="icon1"></i></a>
					<a href="#"><i class="icon2"></i></a>
						<a href="#"><i class="icon3"></i></a>
							<a href="#"><i class="icon4"></i></a>
								<a href="#"><i class="icon5"></i></a>
									<a href="#"><i class="icon6"></i></a>
								</div>
								</div>
			</div>
			<div class="clearfix"></div>
			<div class="container">
	   <div class="header-bottom">
	   <nav class="navbar navbar-default">
							<div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
								<div class="navbar-header">
									  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
											<span class="sr-only">Toggle navigation</span>
											<span class="icon-bar"></span>
											<span class="icon-bar"></span>
											<span class="icon-bar"></span>
									  </button>
									<div class="navbar-brand">
										<h1><a href="index.html">seen</a></h1>
									</div>
								</div>

    <!-- Collect the nav links, forms, and other content for toggling -->
							<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
							  <ul class="nav navbar-nav">
									<li class="active"><a href="index.html">Home <span class="sr-only">(current)</span></a></li>
									<li class="dropdown">
										<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">portfolio<span class="caret"></span></a>
								<ul class="dropdown-menu">
									<li><a href="portfolio.html">portfolio 1</a></li>
									<li><a href="portfolio.html">portfolio 2</a></li>
									<li><a href="portfolio.html">portfolio 3</a></li>
								</ul>

									</li>
									<li><a href="blog.html">blog</a></li>
									<li><a href="pages.html">pages</a></li>
									<li><a href="features.html">features</a></li>
									<li><a href="contact.html">Contact</a></li>
								</ul>
							  
							</div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
						</nav>

					</div>
			</div>
		</div>
        <div class="copyrights">Collect from <a href="http://www.cssmoban.com/" >企业网站模板</a></div>

 <!-- header-section-ends --> 
	<div class="header-slider">
		<div class="slider">
			<div class="callbacks_container">
			  <ul class="rslides" id="slider">
				<li>
				  <img src="images/banner.jpg" alt="">
				  <div class="caption">
					<h3>GRAPHIC WEB DESIGNER</h3>
					<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknowns.</p>
				
				  </div>
				</li>
				<li>
				  <img src="images/banner1.jpg" alt="">
					<div class="caption">
					<h3>Made GRAPHIC DESIGNER</h3>
					<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknowns.</p>
				</div>
				</li>
			</ul>
		  </div>
	  </div>
	 </div>
	 </div>
				<div class="beautifull">
				<div class="container">
				<div class="beautifull-header">
					<h4>Lorem ipsum dolor sit amet.</h4>
						<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknowns.Android, it doesn't matter. Your content will always looks its absolute.</p>
						</div>
					<div class="beautifull-grids">
						<div class="col-md-4 beautiful-grid">
							<div class="icon1">
								<i class="heart"></i>
									</div>
									<div class="passion">
									<h4>Passion</h4>
									<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt posae volor rem modis volor.</p>
								</div>
						<div class="clearfix"></div>
					</div>
					<div class="col-md-4 beautiful-grid">
							<div class="icon1">
								<i class="lamp"></i>
								</div>
									<div class="passion">
									<h4>Creativity</h4>
									<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt posae volor rem modis volor.</p>
								</div>
						<div class="clearfix"></div>
					</div>
					<div class="col-md-4 beautiful-grid">
							<div class="icon1">
								<i class="star"></i>
								</div>
									<div class="passion">
									<h4>Quality</h4>
									<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt posae volor rem modis volor.</p>
								</div>
						<div class="clearfix"></div>
					</div>
					<div class="clearfix"></div>
				</div>
				</div>
				</div>
					<div class="checkout-section">
						<div class="container">
							<div class="checkout-header">
							<h4>Latest Works</h4>
							<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugites.</p>
							</div>
							<div id="portfoliolist">
					<div class="portfolio">
						<div class="portfolio-wrapper">		
							<a href="#small-dialog" class="b-link-stripe b-animate-go  thickbox play-icon popup-with-zoom-anim">
						     <img class="work-img" src="images/img1.jpg" alt="" /><div class="b-wrapper"><h2 class="b-animate b-from-left    b-delay03 "><img src="images/icon-eye.png" alt=""/></h2>
							</div></a>
		                </div>
							<div class="bottom-header">
							<h5>The system and expound the actual</h5>
								<p>Identity</p>
							</div>
					</div>	
						<div class="portfolio">
						<div class="portfolio-wrapper">		
							<a href="#small-dialog1" class="b-link-stripe b-animate-go  thickbox play-icon popup-with-zoom-anim">
						     <img class="work-img" src="images/img2.jpg" alt="" /><div class="b-wrapper"><h2 class="b-animate b-from-left    b-delay03 "><img src="images/icon-eye.png" alt=""/></h2>
						  	</div></a>
		                </div>
							<div class="bottom-header">
							<h5>The system and expound the actual</h5>
								<p>Identity</p>
								</div>
					</div>		
						
<div class="clearfix"></div>					
				</div>
				<link href="css/popuo-box.css" rel="stylesheet" type="text/css" media="all" />
					<script src="js/jquery.magnific-popup.js" type="text/javascript"></script>
			<!-- //pop-up-box -->
			<div id="small-dialog" class="mfp-hide">
						<div class="image-top">
							<img src="images/img1.jpg" alt="" />
							<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to book.There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour. </p>
						</div>
					</div>
					<div id="small-dialog1" class="mfp-hide">
						<div class="image-top">
							<img src="images/img2.jpg" alt="" />
							<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to book.There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour.</p>
						</div>
					</div>
					
			<script>
						$(document).ready(function() {
						$('.popup-with-zoom-anim').magnificPopup({
							type: 'inline',
							fixedContentPos: false,
							fixedBgPos: true,
							overflowY: 'auto',
							closeBtnInside: true,
							preloader: false,
							midClick: true,
							removalDelay: 300,
							mainClass: 'my-mfp-zoom-in'
						});
																						
						});
				</script>		
	<!-- Work Ends Here -->
	

				
				
				<div class="screen-shots">
					<!--sreen-gallery-cursual-->
						<div class="sreen-gallery-cursual">
							<!-- start content_slider -->
						       <div id="owl-demo" class="owl-carousel">
					                <div class="item">
					                	<div class="item-grid">
					                		<div class="item-pic">
					                			<img src="images/pic3.jpg" />
					                		</div>
					                	</div>
					                </div>
					                <div class="item">
					                	<div class="item-grid">
					                		<div class="item-pic">
					                			<img src="images/pic4.jpg" />
                                               </div>
					                		</div>
					                </div>
					                 <div class="item">
					                	<div class="item-grid">
					                		<div class="item-pic">
					                			<img src="images/pic5.jpg" />
                                               </div>
					                		</div>
					                	</div>
					               <div class="item">
					                	<div class="item-grid">
					                		<div class="item-pic">
					                			<img src="images/pic6.jpg" />
                                               </div>
					                		</div>
					                	</div>
					                 <div class="item">
					                	<div class="item-grid">
					                		<div class="item-pic">
					                			<img src="images/pic3.jpg" />
                                               </div>
					                		</div>
					                	</div>
					                 <div class="item">
					                	<div class="item-grid">
					                		<div class="item-pic">
					                			<img src="images/pic4.jpg" />
                                               </div>
					                		</div>
					                	</div>
					               <div class="item">
					                	<div class="item-grid">
					                		<div class="item-pic">
					                			<img src="images/pic5.jpg" />
                                               </div>
					                		</div>
					                	</div>
					                 <div class="item">
					                	<div class="item-grid">
					                		<div class="item-pic">
					                			<img src="images/pic6.jpg" />
                                               </div>
					                		</div>
					                	</div>
										<div class="item">
					                	<div class="item-grid">
					                		<div class="item-pic">
					                			<img src="images/pic3.jpg" />
					                		</div>
					                	</div>
					                </div>
					                <div class="item">
					                	<div class="item-grid">
					                		<div class="item-pic">
					                			<img src="images/pic4.jpg" />
                                               </div>
					                		</div>
					                </div>
					                 <div class="item">
					                	<div class="item-grid">
					                		<div class="item-pic">
					                			<img src="images/pic5.jpg" />
                                               </div>
					                		</div>
					                	</div>
					               <div class="item">
					                	<div class="item-grid">
					                		<div class="item-pic">
					                			<img src="images/pic6.jpg" />
                                               </div>
					                		</div>
					                	</div>
					               </div>
				              </div>
						<!--//sreen-gallery-cursual-->
					</div>
				<!-- requried-jsfiles-for owl -->
							<link href="css/owl.carousel.css" rel="stylesheet">
							    <script src="js/owl.carousel.js"></script>
							        <script>
							    $(document).ready(function() {
							      $("#owl-demo").owlCarousel({
							        items :4,
							        lazyLoad : true,
							        autoPlay : true,
							        navigation : false,
							        navigationText :  false,
							        pagination : true,
							      });
							    });
							    </script>
							  <!-- //requried-jsfiles-for owl -->

				</div>
			</div>
			<div class="wantto-section">
				<div class="container">
					<h4>Want to work with us?</h4>
						<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem seq.</p>
						<a href="#" class="hvr-rectangle-in">get in touch</a>
					</div>
				</div>	
				<div class="contact-section">
					<div class="container">
						<div class="contact-grids">
							<div class="col-md-3 contact-grid">
									<h5>who we are</h5>
									<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem seq.dem tumquam modipsae que voloratati andig.</p>
									<a href="#" class="more">more about us<img src="images/arrow.png"></a>
								</div>
								<div class="col-md-3 contact-grid">
									<h5>get in touch </h5>
										<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores.</p>
										<div class="icon2">
											<ul>
												<li><i class="indicate"></i></li>
													<li><p class="label1">84 Street, City, State 24813</p></li>
													</ul>
														<ul>
														<li><i class="phone"></i></li>
															<li><p class="label1">+00(123)4567890</p></li>
																</ul>
																<ul>
																<li><i class="message"></i></li>
																	<li><a href="mailto:example@mail.com">Info@Seen.com</a></li>
																	</ul>
															</div>
								</div>
								<div class="col-md-3 contact-grid">
									<h5>latest works</h5>
									<div class="cont">
										<div class="contact-leftgrid">
										<div class="img-grid1">
										<img src="images/pic7.jpg">
										</div>
											<div class="img-grid2">
										<img src="images/pic8.jpg">
										</div>
										<div class="clearfix"></div>
										</div>
										
										<div class="contact-rightgrid">
										<div class="img-grid3">
										<img src="images/pic9.jpg">
										</div>
											<div class="img-grid4">
										<img src="images/pic10.jpg">
										</div>
										<div class="clearfix"></div>
										</div>
										</div>
										</div>
								<div class="col-md-3 contact-grid">
									<h5>free update</h5>
										<p>Conecus iure posae volor remped modis aut lor volor accabora incim resto explabo.Laceaque eictemperum quiae sitiorem tumquam.</p>
											<div class="subscribe">
											<form>
											<input type="text" class="text" value="Your email..." onFocus="this.value = '';" onBlur="if (this.value == '') {this.value = ' Enter your email';}">
											<input type="submit" value="Subscribe">
											</form>
											</div>
									</div>
									<div class="clearfix"></div>
							</div>
						</div>
				</div>
				<div class="footer-section">
					<div class="container">
						<div class="footer-left">
							<p>Copyright &copy; 2015.Company name All rights reserved.More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a>
</p>
						</div>
							<div class="bottom-menu">
								<ul>
								<li><a href="index.html" class="active">home</a></li>
								<li><a href="portfolio.html">portfolio</a></li>
								<li><a href="blog.html">blog</a></li>
								<li><a href="pages.html">pages</a></li>
								<li><a href="features.html">features</a></li>
								<li><a href="contact.html">contact</a></li>
								</ul>
							</div>
							<div class="clearfix"></div>
							<script type="text/javascript">
						$(document).ready(function() {
							/*
							var defaults = {
					  			containerID: 'toTop', // fading element id
								containerHoverID: 'toTopHover', // fading element hover id
								scrollSpeed: 1200,
								easingType: 'linear' 
					 		};
							*/
							
							$().UItoTop({ easingType: 'easeOutQuart' });
							
						});
					</script>
				<a href="#" id="toTop" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a>
				</div>				
				</div>
</body>
</html>